<template>
	<d2-container>
		<div slot="header" style="display:flex; justify-content: space-between;">
			<div>
				充值记录
			</div>
			<div>
				<el-form :inline="true" class="demo-form-inline" size="small">
					<el-form-item label="时间" size="small">
						 <el-date-picker
						      v-model="date"
						      type="daterange"
						      range-separator="至"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期"
							   format="yyyy 年 MM 月 dd 日"
							   value-format="yyyy-MM-dd">
						    </el-date-picker>
					</el-form-item>
					<!-- <el-form-item label="充值类型" size="small">
						 <el-select  placeholder="请选择充值类型" style="width: 150px;" v-model="type">
						      <el-option label="储值卡" value="2"></el-option>
						      <el-option label="在线充值" value="1"></el-option>
						    </el-select>
					</el-form-item> -->
					<!-- <el-form-item label="名称" size="small"><el-input style="width: 150px;" v-model="search"></el-input></el-form-item> -->
					<el-form-item><el-button type="primary"  size="small " icon="el-icon-zoom-in" @click="onSearch">搜索</el-button></el-form-item>
				</el-form>
			</div>
		</div>
		<!-- 表格 -->
		<div>
			<template>
				<el-table stripe highlight-current-row style="width: 100%" :data="payRecord">
					<el-table-column type="index" width="50"></el-table-column>
					<el-table-column prop="created_at" label="日期" sortable></el-table-column>
					<el-table-column prop="userid" label="用户ID"></el-table-column>
					<el-table-column prop="username" label="用户昵称"></el-table-column>
					<el-table-column prop="price" label="充值金额"></el-table-column>
					<el-table-column prop="des" label="备注"></el-table-column>
					<el-table-column  label="充值类型">
						<template slot-scope="scope">
							<el-tag >在线充值</el-tag>
							<!-- <el-tag type="danger">储值卡</el-tag> -->
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<template slot="footer">
			<el-pagination
				@current-change="handleCurrentChange"
				:current-page="page.current"
				layout="total, prev, pager, next, jumper"
				:total="page.total"
				:page-size="page.size"
			></el-pagination>
		</template>
	</d2-container>
</template>

<script>
	import {getRechargeLog} from '@/api/api'
export default {
	data() {
		return {
			page: {
				//分页
				total: 20,
				current: 1,
				size: 10
			},
			date:'',
			payRecord:[]
		};
	},
	mounted(){
		this.payData()
	},
	methods: {
		//数据加载
		payData(){
			let data={
				page:this.page.current,
				start_time:this.date[0],
				end_time:this.date[1]
			}
			getRechargeLog(data).then(res=>{
				if(res.state==0){
					this.payRecord=res.data.data;
					this.page.total=res.data.total;
					this.page.size=res.data.per_page;
				}
				
			})
		},
		//分页
		handleCurrentChange(val) {
			this.page.current = val;
			this.payData()
		},
		//搜索
		onSearch(){
			this.page.current=1;
			this.payData()
		}
	}
};
</script>

<style></style>
